<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="lan">
        <span>总共{{ash}}个事项。{{done}}个完成。{{ash-done}}个未完成。</span>
    </script>
    <script>
        window.onload = function () {
            Vue.component('all', {
                // camelCase in JavaScript
                props: ['ash', 'done'],
                template: '#lan'
            });
            var app4 = new Vue({
                el: '#app-4',

                methods: {
                    add: function () {
                        var x = {anything: this.a, done: false};
                        this.ashs.push(x);
                    },
                    switchs: function (index) {
                        this.ashs[index].done = !this.ashs[index].done;
                    },
                },
                data: {
                    a: '',
                    x: 1,
                    ashs: [
                        {anything: '吃饭', done: false},
                        {anything: '睡觉', done: false},
                        {anything: '哈哈哈', done: true}
                    ]
                },
                computed: {
                    done: function () {
                        var s = 0;
                        for (var i = 0; i < this.ashs.length; i++) {
                            if (this.ashs[i].done) {
                                s++;
                            }
                        }
                        return s;
                    }
                }
            })
        }
    </script>
    <style>.del {
        text-decoration: line-through
    }</style>
</head>
<body>
Todo List
<div id="app-4">
    <input v-model="a" v-on:keyup.13="add">
    <button v-on:click="add">添加</button>
    <div v-for="(ash, index) in ashs">
        <input type="checkbox" v-bind:checked="ash.done" v-on:click="switchs(index)">
        {{index}}.
        <span v-bind:class="{del:ash.done}">{{ash.anything}}</span>
    </div>
    <all v-bind:ash="ashs.length" :done="done"></all>
</div>
</body>
</html>